<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI-slider</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-select/css/z-UI.select.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-select/js/z-UI.select.js"></script>
    <style>
		html,body{
            width: 100%;height: 100%;
            margin:0;
        }
    </style>
</head>
<body class="zUI-full">
<div class="zUI-full" style="padding: 20px;">
    <span class="zUI-strik">普通滑块</span>
    <div style="width: 420px;margin-top: 20px;">
        <div id="slider1" class="zUI-slider" zUI-slider-data="37"><div class="zUI-slider-now"><div class="zUI-slider-bar"></div></div></div>
        <br>
        <button class="zUI-btn" onclick="zUI.dialog.alert($(this).prev().prev().attr('zUI-slider-data'))">得到值</button>
    </div>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code1"></pre>
        </div>
    </div>

    <span class="zUI-strik">提示显示格式化</span>
    <div style="width: 420px;margin-top: 20px;">
        <div id="slider2" class="zUI-slider" zUI-slider-data="64"><div class="zUI-slider-now zUI-bg-red"><div class="zUI-slider-bar zUI-bg-red"></div></div></div>
        <br>
        <button class="zUI-btn" onclick="zUI.dialog.alert($(this).prev().prev().attr('zUI-slider-data'))">得到值</button>
    </div>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code2"></pre>
        </div>
    </div>

    <span class="zUI-strik">禁用滑块</span>
    <div style="width: 420px;margin-top: 20px;">
        <div id="slider3" class="zUI-slider disabled" zUI-slider-data="64"><div class="zUI-slider-now zUI-bg-green"><div class="zUI-slider-bar zUI-bg-green"></div></div></div>
        <br>
        <button class="zUI-btn" onclick="zUI.dialog.alert($(this).prev().prev().attr('zUI-slider-data'))">得到值</button>
    </div>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code3"></pre>
        </div>
    </div>

    <span class="zUI-strik">设置区间范围0-10</span>
    <div style="width: 420px;margin-top: 20px;">
        <div id="slider5" class="zUI-slider" zUI-slider-data="10"><div class="zUI-slider-now"><div class="zUI-slider-bar"></div></div></div>
        <br>
        <button class="zUI-btn" onclick="zUI.dialog.alert($(this).prev().prev().attr('zUI-slider-data'))">得到值</button>
    </div>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code4"></pre>
        </div>
    </div>

    <span class="zUI-strik">设置区间范围0-10</span>
    <div style="width: 420px;margin-top: 20px;">
        <div id="slider4" class="zUI-slider" zUI-slider-data="10"><div class="zUI-slider-now"><div class="zUI-slider-bar"></div></div></div>
        <br>
        <button class="zUI-btn" onclick="zUI.dialog.alert($(this).prev().prev().attr('zUI-slider-data'))">得到值</button>
    </div>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code5"></pre>
        </div>
    </div>

</div>
</body>

<script>
    zUI.tab.loadPanel({
        elem:'.zUI-card',
        change: function(type){
            console.log(type);
        },
        close:function(){
            console.log('close');
            //return false时取消关闭
        }
    });
    zUI.select.loadSlider({
        elem:'#slider1,#slider3'
    });
    zUI.select.loadSlider({
        elem:'#slider2',
        format:function (v) {
            return v+'Mb';
        }
    });
    zUI.select.loadSlider({
        elem:'#slider5',
        start: 0,
        end: 10
    });
    zUI.select.loadSlider({
        elem:'#slider4',
        start: 0,
        end: 10,
        //步进为2
        step: 2,
        format:function (v) {
            return v+'Mb';
        }
    });
    $(function () {
        zUI.code.render({
            elem:'#code1',
            value: "zUI.select.loadSlider({\n" +
                "   elem:'#slider1,#slider3'\n" +
                "});"
        });
        zUI.code.render({
            elem:'#code2',
            value: "zUI.select.loadSlider({\n" +
                "   elem:'#slider2',\n" +
                "   format:function (v) {\n" +
                "       return v+'Mb';\n" +
                "   }\n" +
                "});"
        });
        zUI.code.render({
            elem:'#code3',
            value: "<div id='slider3' class='zUI-slider disabled' zUI-slider-data='64'><div class='zUI-slider-now zUI-bg-green'><div class='zUI-slider-bar zUI-bg-green'></div></div></div>"
        });
        zUI.code.render({
            elem:'#code4',
            value: "zUI.select.loadSlider({\n" +
                "   elem:'#slider5',\n" +
                "   start: 0,\n" +
                "   end: 10\n" +
                "});"
        });
        zUI.code.render({
            elem:'#code5',
            value: "zUI.select.loadSlider({\n" +
                "   elem:'#slider4',\n" +
                "   start: 0,\n" +
                "   end: 10,\n" +
                "   //步进为2\n" +
                "   step: 2,\n" +
                "   format:function (v) {\n" +
                "       return v+'Mb';\n" +
                "   }\n" +
                "});"
        });
    })
</script>


</html>